<template>
    <h-section title="需求管理员审核" collapse class="require-admin-check-wrap">
        <div>
            <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="是否过规划组">
                            <div style="width: 100%">
                                {{ form.isPlan }}
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="是否需要拆分">
                            <div style="width: 100%">
                                <div v-if="disabled">
                                    {{ form.isSplit }}
                                </div>
                                <a-radio-group name="radioGroup" v-model:value="form.isSplit" v-else>
                                    <a-radio value="是">是</a-radio>
                                    <a-radio value="否">否</a-radio>
                                </a-radio-group>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="14" v-if="form.isSplit !== '是'">
                        <a-form-item label="选择系统" class="system-cont" name="requestSystem">
                            <div v-if="disabled">
                                {{ $filters.valToNameFilter('fromSystem', form.requestSystem) }}
                            </div>
                            <flexbox v-else>
                                <flexbox-item>
                                    <h-search-select-cell
                                        :default-value="$filters.valToNameFilter('fromSystem', form.requestSystem)"
                                        type="mySystem"
                                        label="system"
                                        @success="handleSelectChange($event, 'requestSystem')"
                                    />
                                </flexbox-item>
                            </flexbox>
                        </a-form-item>
                    </a-col>
                    <a-col :span="10" v-if="form.isSplit !== '是'">
                        <a-form-item label="负责人" class="system-cont" name="agentUser">
                            <div style="width: 100%">
                                <div v-if="disabled">
                                    {{ form.agentUserName }}
                                </div>
                                <h-search-select-cell
                                    :default-value="form.agentUserName"
                                    type="systemManager"
                                    label="empName"
                                    :searchQuery="{ catalogCode: form.catalogCode }"
                                    @success="handleSelectChange($event, 'agentUserName')"
                                    v-else
                                />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="审核意见">
                            <div>
                                <div style="white-space: pre-wrap" v-html="form.auditOpinion" v-if="disabled" />
                                <a-textarea placeholder="请输入审核意见" :auto-size="{ minRows: 4 }" v-model:value="form.auditOpinion" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <flexbox justify="flex-end" class="btn-group" v-if="!disabled">
                <a-button @click="handleSave('否')">驳回</a-button>
                <a-button type="primary" @click="handleSave('是')">通过</a-button>
            </flexbox>
        </div>
    </h-section>
</template>

<script lang="ts">
import { HSearchSelectCell } from '@/components';
import { defineComponent, ref, unref, computed, watch } from 'vue';
export default defineComponent({
    name: 'RequireAcceptInfo',
    components: {
        HSearchSelectCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false }
    },
    setup(props, { emit }) {
        const ruleFormRef = ref<any>();
        const form = ref<any>({
            isPlan: '否',
            isSplit: '否',
            requestSystem: '',
            agentUser: null,
            agentUserName: null,
            auditOpinion: '',
            selfRequestFiles: [],
            pass: '',
            catalogCode: ''
        });
        const rules = computed(() => {
            const rules = {
                agentUser: [{ required: true, message: '负责人不能为空', trigger: 'blur' }]
            };
            return props.disabled || unref(form).pass === '否' ? {} : rules;
        });
        const validate = () => {
            return new Promise((resolve) => {
                unref(ruleFormRef)
                    .validate()
                    .then(
                        () => {
                            resolve(true);
                        },
                        () => {
                            resolve(false);
                        }
                    );
            });
        };
        const handleSave = (pass: string) => {
            form.value.pass = pass;
            emit('save');
        };
        // 通用选择回调
        const handleSelectChange = (val, field: string) => {
            if (field === 'agentUserName') {
                form.value.agentUserName = val.manager;
                form.value.agentUser = val.empId;
            }
            if (field === 'requestSystem') {
                form.value.requestSystem = val.systemId.toString();
                form.value.catalogCode = val.catalogCode;
            }
        };
        const init = () => {
            Object.keys(unref(form)).forEach((key) => {
                if (key === 'isPlan' && !props.detail.isPlan) {
                    form.value.isPlan = '否';
                } else if (key === 'isSplit' && !props.detail.isSplit) {
                    form.value.isSplit = props.detail[key] || '否';
                } else if ((key === 'agentUser' || key === 'agentUserName') && !props.disabled) {
                    form.value.agentUserName = null;
                    form.value.agentUser = null;
                } else if (key === 'catalogCode') {
                    if (props.detail.pmpProductDetailDTO) {
                        form.value.catalogCode = props.detail.pmpProductDetailDTO.catalogCode;
                    }
                } else {
                    form.value[key] = props.detail[key];
                }
            });
        };
        init();
        watch(() => props.detail, init, {
            deep: true
        });
        return {
            ruleFormRef,
            form,
            rules,
            validate,
            handleSave,
            handleSelectChange
        };
    }
});
</script>
<style lang="less">
.require-admin-check-wrap {
    .system-cont {
        .ant-form-item-children {
            display: flex;
        }
        .title {
            text-align: right;
            color: @primary-color;
        }
    }
}
</style>
<style lang="less" scoped>
.require-admin-check-wrap {
    button {
        border-radius: 4px;
    }
    .btn-group {
        margin-top: 24px;
        button + button {
            margin-left: 8px;
        }
    }
}
</style>